<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/goods/collect.css" />
		<link rel="stylesheet" href="../css/mui.picker.min.css">
		<script type="text/javascript">
			(function() {
				var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
				clientWidth = clientWidth || localStorage.getItem("clientWidth")
				if(clientWidth > 750)
					clientWidth = 750;
				document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
			})();
		</script>
		<style>
			html,
			body,
			.mui-content {
				background-color: #ffffff;
			}
			
			.ptsp_top_stats {
				height: 20px;
				width: 100%;
				background-color: #ffffff;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 10000;
			}
			
			.mui-action-back {
				height: 44px;
				width: 44px;
			}
			
			.mui-action-back img {
				width: 100%;
			}
			
			.mui-bar-nav {
				top: 20px;
			}
			
			.mui-content {
				padding-bottom: 100px;
				padding-top: 64px !important;
			}
			
			.arr_left {
				background-image: url(../images/ptsp/left_arr_03.png);
				background-size: 24px 24px;
				background-position: center;
				background-repeat: no-repeat;
			}
			
			.mui-title {
				font-size: 0.768rem;
			}
			
			.mui-bar-nav a {
				font-size: 0.5973rem;
				color: #888888;
				line-height: 44px;
			}
			
			.mui-bar-nav {
				top: 0;
			}
			
			.mui-content {
				padding-bottom: 100px;
				padding-top: 44px !important;
			}
			
			html,
			body {
				padding-top: 0;
			}
			
			a {
				color: #000;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav" style="border-bottom: 1px solid #c5c5c5">
			<a class="mui-action-back mui-icon  mui-pull-left arr_left">
			</a>
			<h1 class="mui-title"><span class="" onclick="mui.openWindow('collect_goods.html','collect_goods.html')">商品收藏</span><span class="top_abv_active">内容收藏</span> </h1>
			<a class="mui-pull-right  right_icon" onclick="coll.to_del()">
				<img src="../images/my_shan.png">
			</a>
		</header>
		<div class="mui-content">
			<div class="collect_list">

				<div :class="is_del|is_Del" v-for="(i,index) in list">
					<div :class="is_del|is_Del_icon_show"><i :class="i.is_checked?'del_active':''" @click="sel_del(index)"></i></div>
					<a :href="'xiangqing.html?id='+i.id+'&type='+i.type+'&status='+i.status+'&types=1'">

						<div class="img fl"><img :src="i.pic" alt=""></div>
						<div class="info">
							<div class="title content_title" v-html="i.name+i.id"></div>
							<div class="collect_num content_des" v-html="i.des"></div>
							<div class="bottom_info">
								<span class="price content_num"> <span v-html="i.collectnum+'人收藏'"></span> </span>
								<span class="content_date">  <span v-html="i.createtime"></span> </span>
								<!-- <span class="add_car_btn" v-show="!is_del" @click="add_buy_car(event,index)">加入购物车</span> -->
							</div>
						</div>

					</a>
				</div>

			</div>
			<transition name="slide-fade">
				<div class="bottom" v-show="is_del">
					<!--<span @click="sel_all_del">全选</span>-->
					<button class="btn_del" @click="to_do_del">确认删除</button>
				</div>
			</transition>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function show_loading() {
				if(window.plus) {
					plus.nativeUI.showWaiting()
				}
			}

			function close_loading() {
				if(window.plus) {
					plus.nativeUI.closeWaiting()
				}
			}
			mui.init()
			Vue.filter('is_Del', function(t) {
				if(t) {
					return 'collect_item delecting'
				} else {
					return 'collect_item'
				}
			})
			Vue.filter('is_Del_icon_show', function(t) {
				if(t) {
					return 'del_icon del_icon_show'
				} else {
					return 'del_icon '
				}
			})

			var coll = new Vue({
				el: '.mui-content',
				data: {
					is_del: false,
					list: '',
					sel_items: [],
					user: '',
					sel_all: false
				},
				methods: {
					get_data: function() {
						var that = this;
						show_loading()

						console.log('uid:' + that.user.uid)
						$.ajax({
							type: "get",
							url: "https://zhapp.4hl.cn/api/article/mycollect_art",
							data: {
								uid: that.user.uid
							},
							success: function(res) {
								res = JSON.parse(res)
								console.log(res);
								if(res.code == 1) {
									that.list = res.data;
									console.log(res.data)
								} else {
									mui.toast('暂无数据')
								}

								close_loading()

							},
							error: function(err) {
								console.log(err)
								close_loading()

							}

						});
					},
					to_del: function() {

						this.is_del ? this.is_del = false : this.is_del = true;
					},
					add_buy_car: function(e, index) {
						mui.toast("已将" + index + "号商品 加入购物车");
						e.target.innerHTML = '已加入购物车'
					},
					sel_del: function(index) {

						if(this.list[index].is_checked) {
							//取消删除
							Vue.set(this.list[index], 'is_checked', false)
							if(this.sel_items) {
								for(var i = 0; i < this.sel_items.length; i++) {

									if(this.sel_items[i] == this.list[index].delid) {
										console.log('当前去掉标记的 delid -->' + this.list[index].delid)

										this.sel_items.splice(i, 1);
									}

								}
							}

						} else {
							//this.list[index].is_checked=true;
							//选中

							Vue.set(this.list[index], 'is_checked', true);

							this.sel_items.push(this.list[index].delid)
						}

						console.log(JSON.stringify(this.sel_items))
					},
					sel_all_del: function() {
						this.sel_items = [];

						if(this.sel_all) {
							this.sel_items = [];
							for(var i = 0; i < this.list.length; i++) {
								//	                        this.list[i].is_checked = false;
								Vue.set(this.list[i], 'is_checked', false);

							}
							this.sel_all = false
						} else {
							this.sel_items = [];
							for(var i = 0; i < this.list.length; i++) {
								//this.list[i].is_checked = true;
								Vue.set(this.list[i], 'is_checked', true);
								this.sel_items.push(this.list[i].delid)

							}
							this.sel_all = true
						}

					},
					to_do_del: function() {
						show_loading()
						var that = this;
						if(this.sel_items.length) {
							$.ajax({
								type: 'post',
								url: 'https://zhapp.4hl.cn/api/article/del_my_col',
								data: {
									del: JSON.stringify(this.sel_items)
								},
								success: function(res) {
									close_loading()
									console.log(res)
									res = JSON.parse(res);
									if(res.code == 1) {
										mui.toast('删除成功');
										that.is_del ? that.is_del = false : that.is_del = true;
										that.get_data();
									} else {
										mui.toast('删除失败')
									}
								},
								error: function(err) {
									close_loading()
								}
							})
						} else {
							mui.toast("请选择要删除的文章")
						}

					}
				},
				mounted: function() {
					var that = this;
					var user = localStorage.getItem('user');

					if(user) {
						this.user = JSON.parse(user);
					}

					this.get_data();

				}
			})
		</script>
	</body>

</html>